<template>
	<view class="myFavorite">
		<view class="nav">
			<view @click="getsel(index)" :class="index==selNav?'nav-item hover':'nav-item'" v-for="(item,index) in navList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
		</view>
		<view class="goods" v-for="(item,index) in pageResult.list" :key="index" >
			<image :src="item.picture" mode="aspectFill" @click="jump(item.jumpType, item.topic_id)"></image>
			<view class="right">
				<text @click="jump(item.jumpType, item.topic_id)">{{item.name}}</text>
				<view class="num" @click="jump(item.jumpType, item.topic_id)">
					<text>{{item.price > 0 ? '￥'+item.price : ''}}</text>
					<text class="oldpic" v-if="item.market_price > 0">￥{{item.market_price}}</text>
				</view>
				<image class="del" :src="obtainImgUrl('icon/del.png')" mode="aspectFill" @click="delCollect(index)"></image>
			</view>
		</view>
		<view v-if="pageResult.list.length == 0" class="nocontent">
			<image :src="obtainImgUrl('icon/noItem.png')" mode="widthFix"></image>
			<text>您暂未收藏商品～</text>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				navList: [
				   {"itemId": "product", "itemName" : "商品"},
				   {"itemId": "card", "itemName" : "电子卡"},
				],
				selNav: 0,
				pageParam: {
					type: 'product',
					page: 0,
					pageSize: 5
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
			}
		},
		methods: {
			getsel(index) {
				this.selNav = index;
				let item = this.navList[index];
				this.pageParam.type = item.itemId;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.loadList();
			},
			loadList() {
				var self = this;
				self.pageParam.page++
				serve.request({
						url: '/member/collect/index',
						data: self.pageParam
					})
					.then(res => {
						console.log(res.data); 
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			delCollect(key) {
				var self = this;
				let collectId = this.pageResult.list[key].id;
				uni.showModal({
				    title: '提示',
				    content: '您确定删除这条收藏吗',
				    success: function (res) {
				        if (res.confirm) {
				            serve.request({
								url: '/member/collect/delete',
								data:{
									id:collectId,
								}
							}).then(res => {
								uni.showToast({
									title:res.message,
								});
								if(res.code == 200) {
									self.pageResult.list.splice(key,1);
								} 
							});
				        } 
				    }
				});
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			console.log('初始');
			this.loadList();
		},
		onPullDownRefresh() {
			console.log('下拉');
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.loadList();
		},
		//触底加载
		onReachBottom() {
			console.log('触底'); 
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.loadList();
		}
	}
</script>

<style scoped lang="scss">
	.myFavorite {
		.nav {
			box-sizing: border-box;
			padding: 20rpx 40rpx 0rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(60, 72, 104, 0.1) solid;
		
			.nav-item {
				height: 32rpx;
				padding: 0rpx 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(39, 52, 88, 0.5);
				border-bottom: 8rpx rgba(243, 204, 91, 0) solid;   
				width: 40%;
				text-align: center;
				height: 60rpx;
			}
		
			.hover {
				border-bottom: 8rpx rgba(243, 204, 91, 1) solid;
				color: rgba(39, 52, 88, 1);
			}
		}
		.goods {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding: 40upx 30upx;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			image {
				width: 170upx;
				height: 170upx;
				margin-right: 20upx;
			}

			.right {
				position: relative;
				width: 503upx;
				height: 170upx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				font-size: 32upx;


				text:first-child {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.del {
					position: absolute;
					width: 60upx;
					height: 60upx;
					right: -30upx;
				}

				.num {
					font-size: 28upx;
					color: rgba(255, 198, 0, 1);
					.oldpic{
						
							color: rgba(235, 236, 240, 1);
							font-size: 24upx;
							margin-left: 20upx;
							text-decoration:line-through
						
					}
				}
			}
		}
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:124upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
	}
</style>
